import React, {useRef, useState} from 'react';
import { PageContainer } from '@ant-design/pro-layout'
import {Button, Image, message, Switch, Tooltip} from "antd";
import { EditOutlined, PlusOutlined} from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";
import AddOrEdit from "@/pages/classifies/components/AddOrEdit";
import {getClassifies, editClassifiesStatus } from "@/services/classifies";


const Index = () => {
  const ref = useRef();
  // 修改 模态框状态设置
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 修改id
  const [editId, setEditId] = useState(undefined);

  // 表格字段名
  const columns = [
    {
      title: '分类名称',
      dataIndex: 'name',
      width: '30%',
      ellipsis: true,
    },
    {
      title: '分类跳转地址',
      dataIndex: 'url',
      width: '20%',
      ellipsis: true,
    },
    {
      title: '分类图片',
      dataIndex: 'img',
      width: '20%',
      hideInSearch: true,
      render:(_,record)=>{
       if (record.pid == 0){
         return '-'
       }else{
         return <Image width={64} src={'https://my-pm.oss-cn-beijing.aliyuncs.com/' + record.img} />
       }
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '20%',
      hideInSearch: true,
      render:(_,record)=>{
        return(
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            onChange={async () => {
              const changeSwitch = await editClassifiesStatus(record.id);
              if (changeSwitch.status === undefined) {
                message.success('改变状态成功');
              }
            }}
            defaultChecked={record.status == 0 ? false : true}
          />
        )
      }
    },
    {
      title: '操作',
      render: (_, record) => {
        return record.pid === 0 ? '' : <div>
          <Tooltip title="编辑">
            <Button
              type="primary"
              onClick={() => {
                showModal(true, record.id)
              }}
              shape="circle" icon={<EditOutlined/>}
            />&nbsp;&nbsp;&nbsp;
          </Tooltip>
        </div>
      }
    },
  ];

  // 是否显示模态框 添加、修改
  const showModal = (show, editId = undefined) => {
    setIsModalVisible(show)
    setEditId(editId)
  }

  // 获取权限路由列表
  const handleGet = async (data) => {
    const response = await getClassifies(data);
    const routes = response.map(item => {
      return {
        id: item.id,
        name: item.name,
        children: item.children,
        pid: item.pid
      }
    })
    return {
      data: routes,
      success: true,
    }
  }

  return (
    <PageContainer>
      <ProTable
        actionRef={ref}
        columns={columns}
        request={async (params = {}, success, total) =>
          handleGet(params, success, total)}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        checkStrictly={false}
        search={false}
        pagination={false}
        ellipsis={true}
        dateFormatter="string"
        headerTitle="路由权限列表"
        toolBarRender={() => [
          <Button key="button" onClick={() => showModal(true)} icon={<PlusOutlined/>} type="primary">
            新建
          </Button>,
        ]}
      />
      {
        isModalVisible ? <AddOrEdit
          Visible={isModalVisible}
          showModal={showModal}
          id={editId}
          refs={ref}
        /> : ''
      }
    </PageContainer>
  );
};

export default Index;
